<template>
  <div class="shadow-card rounded-2xl bg-white p-5">
    <div class="mb-5 flex items-center justify-between">
      <h3 class="text-lg font-semibold">上传列表</h3>
      <span class="bg-gray-light rounded-full px-3 py-1 text-sm text-gray-600"
        >共 {{ fileList.length || 0 }} 个文件 / {{ formatFileSize(filesTotalSize) }}</span
      >
    </div>

    <!-- 上传项 -->
    <div class="upload-item fade-in" v-for="(item, index) in fileList" :key="item.id">
      <div class="mb-2 flex flex-wrap items-start justify-between gap-3">
        <div class="flex items-center gap-3">
          <!-- 文件类型图标 -->
          <FileTypeIcon :fileType="item.fileType"></FileTypeIcon>

          <div class="h-full">
            <h4 class="font-medium">{{ item.fileName }}</h4>
            <p class="align-center mt-0.5 flex justify-between text-xs text-gray-500">
              <!-- 文件大小:总大小 · 上传状态 v-show="item.fileStatus === 'uploading'" -->
              <span> {{ formatFileSize(item.fileSize) }} · {{ statusEnum[item.fileStatus] }}</span>
            </p>
          </div>
        </div>
        <div class="h-full">
          <div class="flex gap-2">
            <Disabled :disabled="!['paused', 'waiting'].includes(item.fileStatus)">
              <MBtn type="success" :title="item.fileStatus === 'waiting' ? '开始' : '继续'" @click="() => item.fileStatus === 'waiting' ? itemStart(item) : itemResume(item)" ></MBtn>
            </Disabled>
            <Disabled :disabled="item.fileStatus !== 'uploading'">
              <MBtn type="warning" title="暂停" @click="itemPause(item)" ></MBtn>
            </Disabled>
            <Disabled :disabled="item.fileStatus !== 'success'">
              <MBtn type="info"  title="下载"><i class="iconfont icon-icon-"></i></MBtn>
            </Disabled>
            <Disabled :disabled="!['waiting', 'success', 'error'].includes(item.fileStatus)">
               <MBtn type="danger" title="删除" @click="itemDel(item)"></MBtn>
            </Disabled>
          </div>

          <div class="flex justify-end pt-2 text-xs text-gray-500">
            <!-- 暂停中显示 -->
            <span v-if="item.fileStatus === 'paused'">已暂停，可继续上传</span>
            <!-- 上传速度 & 剩余时间 -->
            <span v-else-if="item.fileStatus !== 'waiting'"
              >速度: {{ item.uploadSpeed }} · 剩余: {{ item.remainingTime }}</span
            >
          </div>
        </div>
      </div>
      <!-- 进度条 -->
      <div class="h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
        <div
          class="h-2.5 rounded-full"
          :class="{
            'bg-primary progress-shine': item.fileStatus === 'uploading',
            'bg-warning': item.fileStatus === 'paused',
            'bg-secondary': item.fileStatus === 'success',
          }"
          :style="{ width: item.progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- <TextList></TextList> -->
  </div>
</template>

<script setup lang="ts">
import FileTypeIcon from './FileTypeIcon.vue'
import TextList from './textList.vue'
import MBtn from './MBtn.vue'
import type { FileObjType } from '../../types/index.ts'
import Disabled from './Disabled.vue'
import { watch } from 'vue'

const props = defineProps({
  globalUploadStatus: {
    type: String,
    default: 'start',
  },
  fileList: {
    default: () => [] as unknown as FileObjType[],
  },
  filesTotalSize: {
    type: Number,
    default: 0,
  },
  itemDel: {
    type: Function,
    default: (file: FileObjType) => {},
  },
  isUpLoading: {
    type: Boolean,
    default: false,
  },
  itemPause: {
    type: Function,
    default: () => {},
  },
  itemStart: {
    type: Function,
    default: () => {},
  },
  itemResume: {
    type: Function,
    default: () => {},
  },
  // 格式化文件大小
  formatFileSize: {
    type: Function,
    default: () => {},
  },
  statusEnum: {
    type: Object,
    default: () => {},
  },
})

watch(
  () => props.fileList,
  (newVal, oldVal) => {
    console.log('fileList 变化', newVal, oldVal)
  },
)
</script>
